<template>
  <div style="position: relative">
    <div class="mask" v-if="handleType=='look'"></div>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
     <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="code"
        label="设备编号"
        name="code"
      >
        <a-input
          v-model:value="formState.code"
          placeholder="请输入设备编号"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="name"
        label="设备名称"
        name="name"
      >
        <a-input
          v-model:value="formState.name"
          placeholder="请输入设备名称"
        />
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="model"
        label="设备型号"
        name="model"
      >
        <a-input
          v-model:value="formState.model"
          placeholder="请输入设备型号"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="useDate"
        label="启用日期"
        name="useDate"
      >
        <a-date-picker style="width:100%" v-model:value="formState.useDate" />
      </a-form-item>

    
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="deviceClassifyId"
        label="设备类型"
        name="deviceClassifyId"
      >
        <a-select
            allowClear
            style="width: 100%"
            v-model:value="formState.deviceClassifyId"
            placeholder="请选择设备类型"
          >
            <a-select-option
              v-for="item in deviceClassifyList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
      </a-form-item>
        <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="hospitalDepartId"
        label="所属科室"
        name="hospitalDepartId"
      >
        <a-tree-select
          v-model:value="formState.hospitalDepartId"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="departmentList"
          placeholder="请选择科室"
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-item>
       <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="userStaffId"
        label="责任人"
        name="userStaffId"
      >
        <a-select
            allowClear
            style="width: 100%"
            v-model:value="formState.userStaffId"
            placeholder="请选择责任人"
          >
            <a-select-option
              v-for="item in userStaffList"
              :key="item.id"
              :value="item.id"
              >{{ item.realName }}</a-select-option
            >
          </a-select>
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="status"
        label="设备状态"
        name="status"
      >
        <a-select
            allowClear
            style="width: 100%"
            v-model:value="formState.status"
            placeholder="请选择设备状态"
          >
            <a-select-option
              v-for="item in statusList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
      </a-form-item>
     
      <a-form-item
        style="width: 100%"
        ref="remark"
        label="备注"
        name="remark"
      >
       <a-textarea placeholder="请输入备注" v-model:value="formState.remark" showCount :maxlength="120" />
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as department from "@/api/department.js";
import { message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import * as deviceBaseApi from "@/api/deviceBase.js";
import { IdentityCodeValid, treeDataTranslate } from "@/utils";
import * as deviceClassifyApi from "@/api/deviceClassify.js";
import { hospitalDepartList } from "@/api/hospitalDepart.js";
import * as utils from "@/utils/index.js";
 const validateCode = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入设备编号"));
        } else if (value.length > 22) {
          callback(new Error("设备编号长度小于22位"));
        } else {
          callback();
        }
      }
    };
    const validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入设备名称"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("设备名称不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
    const validateModel = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入设备型号"));
        } else if (value.length > 25) {
          callback(new Error("设备型号长度小于25位"));
        } else {
          callback();
        }
      }
    };

const rules = {
        //form表单非空校验
        code: [
          {
            required: true,
            validator: validateCode,
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            validator: validateName,
            trigger: "blur",
          },
        ],
        deviceClassifyId: [
          {
            required: true,
            message: "请选择设备类型",
            trigger: "change",
          },
        ],
        hospitalDepartId: [
          {
            required: true,
            message: "请选择所属科室",
            trigger: "change",
          },
        ],
        model: [
          {
            required: true,
            validator: validateModel,
            trigger: "blur",
          },
        ],
        useDate: [
          {
            required: true,
            message: "请选择启用日期",
          },
        ],
        userStaffId: [
          {
            required: true,
            message: "请选择责任人",
            trigger: "change",
          },
        ],
      };
  const  statusList =  [
        // normal：正常使用 unused 未使用
        {
          label: "正常使用",
          value: "normal",
        },
        {
          label: "未使用",
          value: "unused",
        },
      ]
export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      remark: "", //备注
      hospitalDepartId: null, //所属科室
      status: null, //状态
      code: "", //编号
      name: "", //名称
      model: "", //型号
      useDate: null, //启用日期
      deviceClassifyId:null,//设备类型
      userStaffId:null,//责任人
      id: "",
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {});

  
    // 获取责任人
    const userStaffList = ref([])
     //获取责任人列表数据
    const handleGetuserStaffList = ()=>{
      department.sysUserStaffList({ isPage: false }).then((res) => {
        if (res && res.success) {
          console.log('zre')
          console.log(res.data)
          userStaffList.value = res.data;
        }
      });
    }
    const deviceClassifyList = ref([]);
    //获取设备类型列表
    const handleGetDeviceList = () => {
      deviceClassifyApi.deviceClassifyList({ isPage: false }).then((res) => {
        if (res && res.success) {
          deviceClassifyList.value = res.data;
        }
      });
    };
    // 获取科室数据
    const departmentList = ref([]);
    const getKSData = async () => {
      let res = await hospitalDepartList({
        isPage: false,
        name: "",
      });
      if (res && res.success) {
        let departmentListO = res.data.map((item) => {
          item.label = item.name;
          item.value = item.id
          return item;
        });
        departmentList.value = utils.treeDataTranslate(departmentListO);
        console.log(123444444);
        console.log(departmentList.value);
      }
    };
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
         deviceBaseApi
            .deviceBaseSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      getKSData()
      handleGetDeviceList()
      handleGetuserStaffList()
      if (props.handleType == "add") {
        formState.id = "";
        return false;
      }
      console.log(2323)
      for(let self in props.handleRow){
         formState[self] = props.handleRow[self];
      }
      // formState.id = props.handleRow.id;
      // formState.email = props.handleRow.email;
      // formState.hospitalDepartId = props.handleRow.hospitalDepartId;
      // formState.idNumber = props.handleRow.idNumber;
      // formState.jobNumber = props.handleRow.jobNumber;
      // formState.realName = props.handleRow.realName;
      // formState.roleId = props.handleRow.roleId;
      // formState.parentName = props.handleRow.parentName;
      // formState.mobile = props.handleRow.mobile;
    });

    return {
      formRef,
      // 状态列表
      statusList,
      // 责任人
      userStaffList,
      // 设备列表
      deviceClassifyList,
      // 科室列表
      departmentList, //
      handleType,
      userInfo,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">
.mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
</style>